<template>
  <div class="diversion-container">
    <div class="command-bar-container">
      <!-- Command Bar -->
      <el-radio-group v-model="isFilteredOnly" size="small">
        <el-radio label="2H内全部" :value="0"></el-radio>
        <el-radio label="2H内未通报" :value="1"></el-radio>
      </el-radio-group>
      <el-button link size="small" type="primary" @click="handleJump">
        <span>检索更多</span>
        <el-icon><DArrowRight /></el-icon>
      </el-button>
    </div>
    <el-scrollbar maxHeight="calc(100vh - 400px)">
      <el-popover
        v-for="(item, idx) in currentList"
        placement="left"
        :width="280"
        trigger="click"
      >
        <template #reference>
          <div
            :class="[
              'diversion-item',
              item.reportPlan
                ? item.reportFlow
                  ? ''
                  : 'diversion-item-status-flow'
                : 'diversion-item-status-plan',
            ]"
          >
            <div
              :class="[
                'diversion-item-marker',
                item.reportPlan
                  ? item.reportFlow
                    ? ''
                    : 'diversion-item-marker-status-flow'
                  : 'diversion-item-marker-status-plan',
              ]"
            >
              <el-icon v-if="!item.reportPlan"><WarningFilled /></el-icon>
              <el-icon v-else-if="!item.reportFlow"><QuestionFilled /></el-icon>
              <el-icon v-else><SuccessFilled /></el-icon>
            </div>
            <div class="diversion-item-lines">
              <div class="diversion-item-line-main">
                <!--  -->
                <span>{{ item.flightNumber }}</span>
                <span v-if="item.crewIntention == 'ALT'">备降</span>
                <span v-else-if="item.crewIntention == 'RTN'">返航</span>
                <span v-if="item.diversionAirport != ''">{{
                  item.diversionAirport
                }}</span>
              </div>
              <div class="diversion-item-line-sub">
                <!-- 席位名称 -->
                <el-tag
                  type="info"
                  size="small"
                  class="diversion-item-info-tag"
                >
                  <el-icon><LocationFilled /></el-icon>
                  <span>{{ item.origionSeatName }}</span>
                </el-tag>
                <!-- 是否已经通报计划室 -->
                <el-tag
                  v-if="item.reportPlan"
                  type="info"
                  size="small"
                  class="diversion-item-info-tag"
                >
                  <el-icon><SuccessFilled /></el-icon>
                  <span>计划席</span>
                </el-tag>
                <el-tag
                  v-else
                  type="danger"
                  size="small"
                  effect="dark"
                  class="diversion-item-info-tag"
                >
                  <el-icon><WarningFilled /></el-icon>
                  <span>计划席</span>
                </el-tag>
                <!-- 是否已经通报军民航 -->
                <el-tag
                  v-if="item.reportFlow"
                  type="info"
                  size="small"
                  class="diversion-item-info-tag"
                >
                  <el-icon><SuccessFilled /></el-icon>
                  <span>军民航</span>
                </el-tag>
                <el-tag
                  v-else
                  type="primary"
                  size="small"
                  effect="dark"
                  class="diversion-item-info-tag"
                >
                  <el-icon><WarningFilled /></el-icon>
                  <span>军民航</span>
                </el-tag>
              </div>
            </div>
          </div>
        </template>
        <div class="operator-container">
          <el-text>
            <p>标记 {{ item.flightNumber }} 为：</p>
            <br />
          </el-text>
          <!-- <el-divider /> -->
          <el-form size="small">
            <el-form-item label="计划室">
              <el-radio-group
                v-model="item.reportPlan"
                @change="
                  (value) => {
                    handleChangeStatus(idx, 'reportPlan', value);
                  }
                "
              >
                <el-radio-button label="未通报" :value="0" />
                <el-radio-button label="已通报" :value="1" />
                <el-radio-button label="忽略" :value="2" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="军民航">
              <el-radio-group
                v-model="item.reportFlow"
                @change="
                  (value) => {
                    handleChangeStatus(idx, 'reportFlow', value);
                  }
                "
              >
                <el-radio-button label="未通报" :value="0" />
                <el-radio-button label="已通报" :value="1" />
                <el-radio-button label="忽略" :value="2" />
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </el-popover>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
// import dayjs from "dayjs";
import useSeatStore from "@/store/seat.js";
import useJournalStore from "@/store/journal.js";
// import handleSave from "./handleSave.js";
// import handleQuery from "./handleQuery.js";
import handleUpdateItem from "./handleUpdateItem.js";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const seatStore = useSeatStore();
const journalStore = useJournalStore();

const isFilteredOnly = ref(1);

const currentList = computed(() => {
  const list = isFilteredOnly.value
    ? journalStore.diversionShareStatus.currentListFiltered
    : journalStore.diversionShareStatus.currentList;
  list.sort((a, b) => {
    const timeA = new Date(a.origionTime).getTime() || a.origionTime; // 兼容数字和字符串
    const timeB = new Date(b.origionTime).getTime() || b.origionTime;
    return timeB - timeA; // 倒序：用 b - a
  });
  return list;
});

// const isLoading = computed(
//   () => journalStore.diversionShareStatus.isToolboxLoading
// );

const handleChangeStatus = (itemIndex, statusName, statusValue) => {
  console.log(itemIndex, statusName, statusValue);
  const target = JSON.parse(JSON.stringify(currentList.value[itemIndex]));

  target[statusName] = statusValue;
  target[statusName + "SeatIP"] = seatStore.currentSeat.ip;
  target[statusName + "SeatName"] = seatStore.currentSeat.seatName;
  target[statusName + "SeatUser"] = seatStore.currentSeatData
    ? seatStore.currentSeatData.users.map((u) => u.userName).join(", ")
    : "未知";
  target[statusName + "Time"] = new Date();

  handleUpdateItem(target)
    .then(() => {})
    .catch(() => {});
};

const handleJump = () => {
  router.push("/Journal/DiversionShare");
};
</script>

<style lang="css" scoped>
.diversion-container {
  width: 100%;
}

.diversion-container > *:not(:last-child) {
  border-bottom: 1px dashed var(--el-border-color);
}

.diversion-item {
  width: 100%;
  display: flex;
  color: var(--el-text-color-disabled);
  /* color: var(--el-text-color-primary); */
  cursor: pointer;
}

.diversion-item-status-plan {
  background-color: var(--el-color-danger-light-8);
  color: var(--el-text-color-primary);
  /* color: var(--el-color-danger); */
}

.diversion-item-status-flow {
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
  /* color: var(--el-color-danger); */
}

.diversion-item-marker {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--el-color-info);
}

.diversion-item-marker-status-plan {
  color: var(--el-color-danger);
}

.diversion-item-marker-status-flow {
  color: var(--el-color-primary);
}

.diversion-item-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.diversion-item-line-main {
  /* width: calc(100% - 24px); */
  width: 100%;
  font-size: 18px;
  font-weight: bolder;
  padding: 4px 0 8px 0;
}

.diversion-item-line-main > *:not(:last-child) {
  margin-right: 12px;
}

.diversion-item-line-sub {
  width: calc(100% - 24px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 0 8px 0;
}

.diversion-item-line-sub > *:not(:last-child) {
  margin-right: 8px;
}

.diversion-item-info-tag {
  display: flex;
  justify-content: center;
  align-items: center;
}

.operator-container {
  padding: 8px;
}

.command-bar-container {
  padding: 4px 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
